<template>
    <!-- 安装后效果 -->
    <div class="box">
        <div class="lignBg">
            <div class="title" >安装后效果</div>
            <div class="img_bg">
                <el-image class="imagePreview" :src="src" :preview-src-list="[src]">
                    <div slot="error" class="image-slot">
                        
                    </div>
                </el-image>
            </div>
            <span class="light-corner"></span>
            <span class="light-corner"></span>
            <span class="light-corner"></span>
            <span class="light-corner"></span>
        </div>

    </div>
</template>

<script>

    export default {
        props:{
            info:{
                type: Object,
                default:()=> {}
            },
            apiHost:{
                type: String,
                default:()=>''
            }
        },
        data() {
            return {
                src:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            }
        },
        watch:{
            info:{
                handler(){
                    this.src =   this.apiHost + this.info['email']
                },
                deepth:true
            },
        }
    }
</script>

<style lang="scss" scoped>
.box{
    width: 100%;
    height: 560px;
}
.title{
    font-size: 24px;
    background: url('@/assets/title_gj.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    cursor: pointer;
    color: #fff;
}
.img_bg{
    height: 88%;
}
.imagePreview{
    width: 100%;
    height: 100%;
    border-radius: 5%;
}

</style>